<template>
	<view class="container">
		<!-- 购物车内容显示 --> 
		<view class="none" v-if="token==''">
			登录小程序后才可以查看购物车哦！
		</view>
		<view class="none" v-else-if="list.length==0">
			请先添加商品到购物车！
		</view>
		<view class="box_content" v-else>
			<view class="box_content_one" v-for="item in list" :key='item.bh'>
				<view class="box_content_oput">
					<view class="box_content_oput_input">
						<checkbox-group @change="checkboxChange($event,item.shopcartBh)">
							<checkbox :value="item.shopcartBh" :checked="item.ischecked" />
						</checkbox-group>
					</view>
					<view class="box_content_oput_imges">
						<image :src="item.xhtp" mode=""></image>
					</view>
				</view>
				<view class="box_content_number">
					<view class="box_content_title">
						{{item.xhmc}}
					</view>
					<view class="box_content_effect">

					</view>
					<view class="box_content_and">
						<view class="box_content_number_discount">
							￥{{item.xhyjjg}}.00
						</view>
						<!-- 	<view class="box_content_number_original">
							{{item.xhyjjg}}.00
						</view> -->
					</view>
				</view>
				<view class="calculator">
					<text class="left_i" @tap="editNum(item.bh,-1)">-</text>
					<text class="center_con">{{item.shopcartCount}}</text>
					<!-- <input class="center_con" type="text" value="1" /> -->
					<text class="right_i" @tap="editNum(item.bh,1)">+</text>
				</view>
			</view>
		</view>

		<view v-if="boton_markes.length != ''"
			style="text-align: center; margin: auto; font-size: 14px; color: #000;margin-bottom: 50rpx;">
			挑选商品
		</view>

		<view class="box_botton" v-if="boton_markes.length != ''">
			<view class="box_bottcontent">
				<!-- goods_id -->
				<view class="box_bottent" v-for="(items,index1) in boton_markes" :key="index1">
					<view class="box_boent_one">
						<!-- <image src="../../static/image/3_2.jpg" mode=""></image> -->
						<!--  ${{url}}/api/goods/goodsThumImages?goods_id=${{item.goods_id}}&width=400&height=400-->
						<image :src="items.img_url" mode="widthFix">
					</view>
					<view class="box_boent_two">
						{{items.goods_name}}888{{items.goods_name}}
					</view>
					<view class="box_boent_three">
						<view class="box_boent_three_ins">
							<text>￥</text>
							{{items.shop_price}}
							<text>00</text>
						</view>
						<view class="box_boent_three_let">
							已售{{items.virtual_sales_sum}}件
						</view>
					</view>
				</view>
			</view>
		</view>

		<view style="height:60rpx ;"></view>
		<!-- 底部导航栏 -->
		<view class="tabbar">
			<view class="all">
				<checkbox-group @change="checkboxChangeAll">
					<checkbox :checked="isAllChecked" />全选
				</checkbox-group>
			</view>
			<view class="totalPrice">
				<text class="totalPrice_ff">合计:</text>
				<text class="totalPrice_red">￥{{totalPrice}}.00</text>
			</view>
			<view class="submitOrder" @tap="submitOrder">
				付款
			</view>
		</view>
		<view style="width: 100%; height: 50rpx; background-color: #F0F0F0; margin-bottom: 50rpx;"></view>

		<uni-popup ref="popup" type="bottom">
			<view class="pop">
				<!--<view class="topOne">
					<image :src="productsList.xhtpList[0]" class="img"></image>
					<view class="prices">
						<text class="yuan">￥</text>
						<text>{{productsList.xhyjjg}}</text>
					</view>
					<view class="priceALl">
						<text class="yuan">实付价￥</text>
						<text>{{productsList.xhyjjg}}</text>
					</view>
				</view> -->
				<view class="address">
					<view v-if="SetAdd==false" class="liss">
						<image src="../../static/img/address.png" class="imgs"></image>
						<view class="body">
							<view class="name" v-if="addresss.addressName==undefined">请先添加地址</view>
							<view class="name" v-else>{{addresss.addressName}} {{addresss.addressLocation}}</view>
							<view class="chnuo">包邮 送运费险 付款后1小时发货</view>
						</view>
						<uni-icons v-if="addresss.addressName==undefined" @click="GoAddre" type="right" size="18"
							color="#d9d9d9"></uni-icons>
						<uni-icons v-else @click="setNewAdd" type="right" size="18" color="#d9d9d9"></uni-icons>
					</view>
					<view v-if="SetAdd==true" v-for="(item,indexx) in AllAddress" :key="indexx" class="liss">
						<view class="bodys">
							<view class="name" @click="setAddre(item)">
								<text
									class="round">{{item.addressName.charAt(0)}}</text>{{item.addressName}}-{{item.addressPhone}}-{{item.addressLocation}}
							</view>
						</view>
					</view>
				</view>
				<view class="serprsing">
					<text class="widths">贺卡</text>
					<text :class="showCard ? 'hsActive' : 'has'" @click="IsCard(1)">纸质贺卡</text>
					<text :class="!showCard ? 'hsActive' : 'has'" @click="IsCard(0)">无需贺卡</text>
					<textarea v-show="showCard" class="inp" name="" id="" cols="30" rows="10" @blur="getValue"
						placeholder="写上您的祝福语,可附上署名(200字内),请勿填写特殊符号和表情包"></textarea>
				</view>
				<view class="bottom">
					<view class="button" @click="GoPay">立即支付￥{{totalPrice}}.00</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				//购物车有无商品
				show: true,
				//全选是否选中
				isAllChecked: false, //是否全选
				totalPrice: 0, //总价
				//商品
				list: [],
				boton_markes: [],
				token: '',
				cardMs: '',
				addresss: '',
				AllAddress: [],
				SetAdd: false,
				showCard: false, //无卡片
			}
		},
		onShow() {
			var bs = uni.getStorageSync('UserInformation')
			this.token = bs.usertoken
			console.log(this.token)
			this.GetData()
			this.getAddress()
			// this.isAllChecked = false
		},
		methods: {
			GoPay() {

				var th = this
				if (th.addresss.addressName == undefined) {
					uni.showToast({
						title: '请选择收货地址',
						icon: 'error'
					})
					return
				}
				if (th.cardMs == '') {
					this.cardMs = "无需贺卡"
				}
				uni.showModal({
					title: '模拟支付环节',
					content: '是否确认支付',
					success(e) {

						// 销量++
						th.requestfs({
							url: '/mall/goods/addXhxl?bh=' + th.bh,
							method: 'PUT',
							Authorization: th.token,
						}).then(res => {})


						var status = ''
						if (e.confirm) {
							th.requestfs({
								url: '/mall/order/addOrUpdateOrder',
								data: {
									goodsBh: th.productsList.bh,
									addressBh: th.addressBh,
									cardMs: th.cardMs,
									goodsCount: 1,
									status: 1
								},
								method: "POST",
								Authorization: th.token,
							}).then(res => {
								uni.showToast({
									title: '支付成功',
									icon: 'success'
								})

								uni.navigateTo({
									url: '/pages-me/MyOrder/MyOrder'
								})
							})
						} else {
							th.requestfs({
								url: '/mall/order/addOrUpdateOrder',
								data: {
									goodsBh: th.productsList.bh,
									addressBh: th.addressBh,
									cardMs: th.cardMs,
									goodsCount: 1,
									status: 0
								},
								method: "POST",
								Authorization: th.token,
							}).then(res => {

								uni.showToast({
									title: '支付失败',
									icon: 'success'
								})

								uni.navigateTo({
									url: '/pages-me/MyOrder/MyOrder'
								})
							})
						}
					},
					fail(err) {
						console.log('失败', err)
					}
				})
			},
			IsCard(num) {
				if (num == 0) {
					this.showCard = false
				} else {
					this.showCard = true
				}
			},
			getValue(e) {
				// console.log(this.showCard)
				// if (this.showCard) {
				this.cardMs = e.detail.value
				// } else {
				// 	this.cardMs = "无需贺卡"
				// }
			},
			getAddress() {
				this.requestfs({
					url: '/mall/customer/address/selectAddress',
					Authorization: this.token,
				}).then(res => {
					if (res.data.msg == "success") {
						if (res.data.data.length != 0) {
							this.addresss = res.data.data[0]
							this.AllAddress = res.data.data
							this.addressBh = res.data.data[0].bh
						}
					}
				})
			},

			setAddre(item) {
				this.SetAdd = false
				this.addresss = item
				this.addressBh = item.bh
			},
			setNewAdd() {
				this.SetAdd = true
			},
			GetData() {
				this.requestfs({
					url: '/mall/shopcart/shopcartList',
					Authorization: this.token,
				}).then(res => {
					if (res.data.msg == "success") {
						this.list = res.data.data

						var lists = []
						this.list.forEach(v => {
							if (v.ischecked) {
								lists.push(v)
							}
						})

						if (lists.length == this.list.length && this.list.length > 0) {
							this.isAllChecked = true
						} else {
							this.isAllChecked = false
						}

						this.setCart()

					}
				})
			},
			setCart() { //计算总价
				let totalPrice = 0

				this.list.forEach(v => {
					if (v.ischecked) {
						totalPrice += v.shopcartCount * v.xhyjjg
					}
				})
				this.totalPrice = totalPrice
			},
			editNum(bh, type) { //编辑数量
				const index = this.list.findIndex(v => v.bh == bh)
				if (this.list[index].shopcartCount == 1 && type == -1) {
					uni.showToast({
						title: '至少购买一件商品',
						icon: 'none'
					})
				} else {
					this.list[index].shopcartCount += type
				}
				this.setCart()
			},

			// 全选
			checkboxChangeAll(e) {
				this.isAllChecked = !this.isAllChecked

				var bhlist = []
				var lists = []
				this.list.forEach(v => {
					if (!v.ischecked) { //选中 未选中的选项
						bhlist.push(v.shopcartBh)
					}
				})

				if (this.isAllChecked == false) {

					//全取消
					this.list.forEach(v => {
						console.log('取消')

						this.requestfs({
							url: '/mall/goods/updateIschecked?bh=' + v.shopcartBh,
							method: 'GET',
							Authorization: this.token,
						}).then(res => {
							if (res.data.msg == "success") {
								this.GetData()
								this.setCart()
							}
						})

					})
				}

				//全选
				bhlist.forEach(v => {

					this.requestfs({
						url: '/mall/goods/updateIschecked?bh=' + v,
						method: 'GET',
						Authorization: this.token,
					}).then(res => {
						if (res.data.msg == "success") {
							this.GetData()
							this.setCart()
						}
					})
				})
			},

			// 选择每一项
			checkboxChange: function(e, bh) {
				console.log(bh)
				// var bhlist = []
				// bhlist.push(bh)
				this.requestfs({
					url: '/mall/goods/updateIschecked?bh=' + bh,
					method: 'GET',
					Authorization: this.token,
				}).then(res => {})

				var temp = []
				// var bh=item.bh
				// 找到被修改的商品对象
				let index = this.list.findIndex(v => v.shopcartBh === bh)
				// 选中状态取反
				this.list[index].ischecked = !this.list[index].ischecked

				temp = this.list.every(v => v.ischecked)
				if (temp) {
					this.isAllChecked = true
				} else {
					this.isAllChecked = false
				}
				this.setCart()
			},
			submitOrder() { // 提交购物车订单
				if (this.list.length == 0) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				// 判断是否选择购物车商品
				var bol = this.list.every(el => el.ischecked == false)
				if (bol) {
					uni.showToast({
						title: "请至少选择一个商品",
						icon: "none",
						duration: 2000
					})
				} else {
					// 购买 ---弹框填收货地址
					this.$refs.popup.open('bottom')
				}
			}
		},
	}
</script>

<style lang="scss">
	.pop {
		width: 100%;
		background-color: #f2f2f2;
		border-radius: 20rpx;

		.bottom {
			background-color: white;
			margin-top: 20rpx;
			padding: 20rpx 0;

			.button {
				text-align: center;
				width: 96%;
				margin: 0 auto;
				background-image: linear-gradient(to right, rgba(238, 121, 51, 0.7), rgba(233, 52, 57, 1));
				height: 80rpx;
				line-height: 80rpx;
				color: #ffffff;
				border-radius: 50rpx;
			}


		}

		.serprsing {
			background-color: white;
			border-radius: 20rpx;
			padding: 20rpx;
			margin: 20rpx 12rpx 0 12rpx;

			.inp {
				background-color: #fff0ec;
				width: 95%;
				margin-top: 10rpx;
				padding: 15rpx;
				border-radius: 20rpx;
			}

			.widths {
				width: 55%;
				display: inline-block;
				line-height: 80rpx;
			}

			.has {
				text-align: center;
				width: 21%;
				display: inline-block;
				font-size: 26rpx;
				background-color: #e9ecf0;
				border-radius: 50rpx;
				margin-left: 1%;
				padding: 10rpx 0;
			}

			.hsActive {
				margin-left: 1%;
				text-align: center;
				width: 21%;
				display: inline-block;
				font-size: 26rpx;
				color: white;
				background-color: #ff734c;
				border-radius: 50rpx;
				padding: 10rpx 0;
			}
		}

		.address {
			background-color: white;
			border-radius: 20rpx;
			padding: 20rpx;
			margin: 0 12rpx 0 12rpx;

			.liss {
				display: flex;

				.bodys {
					width: 78%;
					// margin-left: 18rpx;
					line-height: 55rpx;

					.name {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow: ellipsis;

						.round {
							display: inline-block;
							width: 40rpx;
							height: 40rpx;
							line-height: 40rpx;
							text-align: center;
							border-radius: 50%;
							background: #fae1d7;
							color: #ea5a2c;
							margin: 0 20rpx 20rpx 0;
							font-size: 28rpx;
						}
					}
				}

				.body {
					width: 78%;
					margin-left: 18rpx;
					line-height: 55rpx;

					.name {
						font-weight: bold;

						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow: ellipsis;
					}
				}

				uni-icons {
					margin-top: 35rpx;
				}

				.imgs {
					width: 50rpx;
					height: 50rpx;
					margin-top: 26rpx;
				}
			}
		}

		.topOne {
			padding-top: 20rpx;
			margin: 20rpx 12rpx 20rpx 12rpx;
			display: flex;
			line-height: 60rpx;

			.priceALl {
				color: white;
				background-color: #df6232;
				font-weight: bold;
				border-radius: 50rpx;
				padding: 0 12rpx;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 26rpx;
				margin-top: 6rpx;

				.yuan {
					font-size: 20rpx;
					font-weight: normal;
				}
			}

			.prices {
				color: #df6232;
				font-weight: bold;
				margin: 0 12rpx 0 20rpx;

				.yuan {
					font-size: 22rpx;

				}
			}

			.img {
				width: 66rpx;
				height: 66rpx;
				border-radius: 4rpx;
			}
		}
	}

	.container {
		width: 100%;
		background-color: #F0F0F0;
		min-height: 100vh;
		height: auto;
		border-top: 1rpx transparent solid;

		.none {
			width: 100%;
			line-height: 60vh;
			text-align: center;
			color: #a0a0a0;
		}

		.border {
			width: 100%;
			height: 130rpx;
			line-height: 160rpx;
			background-color: #ffffff;
			display: flex;
			justify-content: space-between;
			position: fixed;
			z-index: 999;
			top: 0;

			.border_left {
				padding: 14rpx 20rpx;
				font-size: 28rpx;
				color: #333333;
			}

			.border_center {
				padding-right: 96rpx;
				font-size: 36rpx;
				font-weight: 600;
			}
		}

		.border-lis {
			width: 100%;
			height: 130rpx;
		}

		.box_content {
			.box_content_one {
				width: 712rpx;
				height: 244rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				margin: 30rpx auto;
				display: flex;
				box-sizing: border-box;
				position: relative;

				.box_content_oput {
					display: flex;

					.box_content_oput_input {
						padding: 92rpx 10rpx;

						/* #ifdef APP-PLUS ||MP-WEIXIN */
						checkbox .wx-checkbox-input {
							border-radius: 50% !important;
							/* color: #ffffff !important; */
						}

						checkbox .wx-checkbox-input.wx-checkbox-input-checked {
							color: #fff;
							background-image: linear-gradient(to right, #ff99cb, #ff6b6a);
						}

						/* .wx-checkbox-input.wx-checkbox-input-checked {
										border: none !important;
									} */
						/* #endif */
					}

					.box_content_oput_imges {
						width: 100%;
						margin: 30rpx 0rpx auto;

						image {
							width: 180rpx;
							height: 180rpx;
						}
					}

				}

				.box_content_number {
					padding: 35rpx 20rpx;

					.box_content_title {
						width: 412rpx;
						height: 60rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
						line-height: 30rpx;
						//字体超出俩行 隐藏显示省略号
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.box_content_effect {
						width: 242rpx;
						height: 24rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #7E7E7E;
						line-height: 24rpx;
						background-color: #fff;
						margin: 20rpx 0rpx;
					}

					.box_content_and {
						display: flex;
						padding: 10rpx 0rpx;

						.box_content_number_discount {
							font-size: 40rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #FF4E3B;
						}

						.box_content_number_original {
							color: #999999;
							font-size: 22rpx;
							padding: 15rpx 20rpx;
						}
					}

				}

				.calculator {
					position: absolute;
					display: flex;
					top: 62%;
					left: 78%;

					.left_i {
						width: 30rpx;
					}

					.center_con {
						width: 40rpx;
						background-color: #F6F6F6;
						padding: 0rpx 20rpx;
						text-align: center;
					}

					.right_i {
						width: 30rpx;
					}
				}
			}

		}

		.box_botton {
			width: 100%;
			margin-bottom: 50rpx;
			font-family: PingFangSC-Regular, PingFang SC;

			.box_bottcontent {
				width: 95%;
				margin: auto;
				display: flex;
				flex-flow: initial;
				flex-wrap: wrap;
				align-items: center;

				.box_bottent {
					// width: 330rpx;
					width: 46%;
					background: #ffffff;
					border-radius: 12rpx;
					margin: 15rpx 14rpx;
					box-sizing: border-box;

					.box_boent_one {
						width: 330rpx;
						height: 330rpx;
					}

					.box_boent_one image {
						width: 100%;
						height: 100%;
						border-radius: 12rpx;
					}

					.box_boent_two {
						width: 300rpx;
						height: 58rpx;
						padding: 20rpx 20rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #0F0C10;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.box_boent_three {
						display: flex;
						flex-flow: initial;
						justify-content: space-between;
						padding: 20rpx 10rpx;

						.box_boent_three_ins {
							width: 130rpx;
							height: 28rpx;
							line-height: 28rpx;
							font-size: 36rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 600;
							color: #FF4E3B;
							display: flex;
							flex-direction: row;

							text {
								font-size: 20rpx;
								padding-top: 8rpx;
							}
						}

						.box_boent_three_let {
							font-size: 20rpx;
							color: #999999;
							background: #FFFFFF;
						}
					}
				}
			}
		}

		// 底部导航
		.tabbar {
			width: 100%;
			padding: 0 15rpx;
			height: 112rpx;
			background-color: #ffffff;
			position: fixed;
			bottom: -5rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			// border-radius: 8% 8%;
			.all {
				font-size: 32rpx;
				color: #3E3E3E;
				letter-spacing: 2.29rpx;
				display: flex;

				/* #ifdef APP-PLUS ||MP-WEIXIN */
				checkbox .wx-checkbox-input {
					border-radius: 50% !important;
					/* color: #ffffff !important; */
				}

				checkbox .wx-checkbox-input.wx-checkbox-input-checked {
					color: #fff;
					background-image: linear-gradient(to right, #ff99cb, #ff6b6a);
				}

				/* .wx-checkbox-input.wx-checkbox-input-checked {
								border: none !important;
							} */
				/* #endif */
			}

			.totalPrice {
				letter-spacing: 2.29rpx;
				padding-left: 100rpx;

				.totalPrice_ff {
					font-size: 24rpx;
					color: #999999;
				}

				.totalPrice_red {
					font-size: 32rpx;
					color: #FF4E3B;
				}
			}

			.submitOrder {
				width: 160rpx;
				height: 60rpx;
				background-image: linear-gradient(to right, #ff786e, #ef5e25);
				border-radius: 60rpx;
				color: #FFFFFF;
				letter-spacing: 2.57rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>
